<template>
  <div>
    <h2>Fruits 1</h2>
    <p v-for="item in fruits">{{ item }}</p>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';

const fruits = ref(['apple', 'pear', 'banana'])

onMounted(() => {
  setTimeout(() => {
    /**
     * it's ok
     * fruits.value.splice(0, 1, 'sss')
     * fruits.value = ['xixixi']
     */
    fruits.value.push('xadawq')
  }, 1000)
})
</script>
